<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>教务员-查看学生就业信息</title>
    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/index.css">
</head>
<body>
<div class="body-head"><span>学生就业信息管理&nbsp;>&nbsp;查看学生就业信息</span></div>
<div class="demoTable">
    <label class="layui-form-label">毕业年份：</label>
    <div class="layui-inline">
        <input class="layui-input" type="text" id="yearSelector">
    </div>
    <button class="layui-btn layui-btn-sm" data-type="reload" id="year-btn">搜索</button>
    <button class="layui-btn layui-btn-sm" id="export-btn">导出</button>
</div>
<table class="layui-hide" id="test" lay-filter="test"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="check">详情</a>
</script>

<script src="${ctx}/static/js/jquery.min.js"></script>
<script src="${ctx}/static/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->

<script>

    layui.use(['table', 'jquery', 'form', 'laydate'], function () {
        let table = layui.table;
        let $ = layui.$;
        let form = layui.form;
        let laydate = layui.laydate;

        laydate.render({
            elem: '#yearSelector', //指定元素
            type: 'year'
        });

        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：https://www.layui.com/doc/modules/table.html#totalRow
        table.render({
            id: 'test',
            elem: '#test',
            url: '${ctx}/academic/getStudentJobInfo.action',
            toolbar: '#toolbarDemo',
            title: '学生就业信息表',
            page: true,
            limit: 10,
            limits: [3, 5, 10],
            cols: [
                [{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: 'stuNo',
                    title: '学号',
                    width: 120,
                    sort: true
                }, {
                    field: 'name',
                    title: '姓名',
                    width: 100
                }, {
                    field: 'companyName',
                    title: '单位名称',
                    width: 230
                }, {
                    field: 'station',
                    title: '岗位',
                    width: 150
                }, {
                    field: 'entryTime',
                    title: '入职时间',
                    width: 120,
                    sort: true
                }, {
                    field: 'salary',
                    title: '工资',
                    width: 80
                }, {
                    field: 'developmentLanguage',
                    title: '开发语言',
                    width: 100
                }, {
                    field: 'dataBase',
                    title: '数据库',
                    width: 100
                }, {
                    field: 'frame',
                    title: '框架',
                    width: 120
                }, {
                    fixed: 'right',
                    align: 'center',
                    title: '操作',
                    toolbar: '#barDemo',
                    width: 150
                }]
            ],
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                let result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                } else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                }
            }
        });

        let year = $("#yearSelector");
        let active = {
            reload: function () {
                //执行重载
                table.reload('test', {
                    page: {
                        curr: 1  //重新从第1页开始
                    },
                    where: {
                        grade: year.val()
                    }
                });
            }
        };

        $('#export-btn').on('click', function () {
            let year2 = $("#yearSelector").val();
            if (year2 != "") {
                layer.confirm("确定要导出" + year2 + "年的数据吗？", {btn: ['确定', '取消'], title: "提示"}, function () {
                    $.ajax({
                        type: "get",
                        url: "${ctx}/academic/getStudentJobInfo.action",
                        data: {grade: year2},
                        dataType: "json",
                        success: function (data) {
                            // console.log(data);
                            if (data.data.length != 0) {
                                location.href = "${ctx}/academic/exportJob.action?yearSelector=" + year2;
                                layer.msg("导出成功");
                            } else {
                                layer.msg("导出失败, 不存在数据");
                            }
                        },
                        error: function () {
                            layer.msg("请求失败");
                        }
                    });
                    layer.closeAll('dialog');
                });
            } else {
                layer.msg("请选择年份");
                return;
            }
        });

        $('#year-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        table.on('tool(test)', function (obj) {

            switch (obj.event) {
                case 'check':
                    let data = obj.data;

                    layer.open({
                        type: 1,
                        area: ['1258px', '600px'],
                        title: '编辑',
                        content: $("#edit_form"),
                        shade: 0,
                        cancel: function (index) {
                            layer.closeAll();
                        }
                    });

                    //设置内容
                    $("#id").val(data.id);
                    $("#stuNo").val(data.stuNo);
                    $("#name").val(data.name);
                    $("#companyName").val(data.companyName);
                    $("#companyCode").val(data.companyCode);
                    $("#city").val(data.city);
                    $("#address").val(data.address);
                    $("#station").val(data.station);
                    $("#department").val(data.department);
                    $("#entryTime").val(data.entryTime);
                    $("#resignationTime").val(data.resignationTime);
                    $("#attendanceTime").val(data.attendanceTime);
                    $("#closingTime").val(data.closingTime);
                    $("#salary").val(data.salary);
                    $("#weal").val(data.weal);
                    $("#developmentLanguage").val(data.developmentLanguage);
                    $("#dataBase").val(data.dataBase);
                    $("#frame").val(data.frame);
                    $("#remark").val(data.remark);
                    //更新表单
                    form.render();
                    break;
            }
        });

        $("#btnClose").on("click", function (index) {
            layer.closeAll();
        });

    });
</script>

<%--编辑表单弹出层--%>
<form class="layui-form" id="edit_form" style="display:none; margin-top: 16px">
    <input type="hidden" name="id" id="id" value="">

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">学号</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" name="stuNo" readonly="readonly" id="stuNo" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="name" readonly="readonly" id="name" class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">公司名称</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" name="companyName" readonly="readonly" id="companyName"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">机构代码</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" name="companyCode" readonly="readonly" id="companyCode"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">出勤时间</label>
            <div class="layui-input-inline" style="width: 112px;">
                <input type="text" name="attendanceTime" readonly="readonly" id="attendanceTime"
                       autocomplete="off" class="layui-input layui-disabled">
            </div>
            <div class="layui-form-mid">-</div>
            <div class="layui-input-inline" style="width: 113px;">
                <input type="text" name="closingTime" readonly="readonly" id="closingTime" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">城市</label>
            <div class="layui-input-block" style="width: 250px;">
                <input type="text" name="city" readonly="readonly" id="city" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">详细地址</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="address" readonly="readonly" id="address" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">岗位</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="station" readonly="readonly" id="station" class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">部门</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="department" readonly="readonly" id="department"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">入职日期</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="entryTime" readonly="readonly" id="entryTime" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">离职日期</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="resignationTime" readonly="readonly" id="resignationTime" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">月薪</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="salary" readonly="readonly" id="salary" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">福利</label>
            <div class="layui-input-block" style="width: 624px">
                <input type="text" name="weal" readonly="readonly" id="weal" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">开发语言</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="developmentLanguage" readonly="readonly" id="developmentLanguage"
                       autocomplete="off" class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">数据库</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="dataBase" readonly="readonly" id="dataBase" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">主要框架</label>
            <div class="layui-input-block" style="width: 250px">
                <input type="text" name="frame" id="frame" readonly="readonly" autocomplete="off"
                       class="layui-input layui-disabled">
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-form-text" style="width: 1257px">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-block" style="width: 998px;">
            <textarea name="remark" id="remark" readonly="readonly" class="layui-textarea layui-disabled"></textarea>
        </div>
    </div>
</form>

<script src="${ctx}/static/js/index.js"></script>
</body>
</html>
